import React from 'react'
import styles from './GifInfo.css'

type Props = {
   data: Array,
   goToCondition: Function
}
class GidInfo extends React.Component {
  props: Props
  componentWillMount () {

  }

  render () {
    const { data, goToCondition } = this.props
    // 名字与坐标
    let name = data.mes.name
    let title = data.mes.name
    let top = Number(data.mes.top) - 17
    let left = Number(data.mes.left) - 30
    // 宽高
    let tagtW = 70
    let tagtH = 16
    let tagbH = 13
    if (data.data.dataSource === 'TCS') {
      name = data.mes.variable
      top = Number(data.mes.top) - 2
      left = Number(data.mes.left) - 2
      tagtW = data.mes.w
      tagtH = data.mes.h / 2
      tagbH = data.mes.h / 2
    }
    // 是否预警变颜色
    let valueColor
    const limitType = data.limitType
    if (limitType === 2) {
      valueColor = '#f00' // 危险
    } else if (limitType === 1) {
      valueColor = '#ee7576' // 预警
    } else {
      valueColor = '#333' // 正常
    }
    // 判断value是否是数字
    let value = data.value
    if (!isNaN(data.value)) {
      value = Math.round(data.value * 100) / 100
    }
    return (
      <div className={styles['ImgTags']}
        onClick={function () { goToCondition(data) }}
        style={{
          cursor:'pointer', position:'absolute', top:top, left:left }}>
        <p style={{ width:tagtW, height: tagtH }} className={styles['tagt']} title={title}>{name}</p>
        <p style={{ height: tagbH }} className={styles['tagb']}>
          <span style={{ color: valueColor }} className={styles['left']}>{value}</span>
          <span className={styles['right']}>{data.mes.unit}</span>
        </p>
      </div>
    )
  }
}
export default GidInfo
